<style>
.chart-container {
    height: 400px;
    margin-bottom: 30px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
}
.chart-title {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #333;
}
.stat-card {
    display: inline-block;
    width: 18%;
    margin-right: 2%;
    text-align: center;
    padding: 15px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.stat-card:last-child {
    margin-right: 0;
}
.stat-number {
    font-size: 24px;
    font-weight: bold;
    color: #1E9FFF;
    margin-bottom: 5px;
}
.stat-label {
    font-size: 14px;
    color: #666;
}
.not-started-color { color: #FFB800; }
.in-progress-color { color: #1E9FFF; }
.completed-color { color: #009688; }
.canceled-color { color: #999; }
</style>

<div>
    <h2 style="text-align: center; margin: 20px 0;">任务统计信息</h2>
    
    <!-- 统计卡片区域 -->
    <div style="margin-bottom: 30px;">
        <div class="stat-card">
            <div class="stat-number">0</div>
            <div class="stat-label">总任务数</div>
        </div>
        <div class="stat-card">
            <div class="stat-number not-started-color">0</div>
            <div class="stat-label">未开始</div>
        </div>
        <div class="stat-card">
            <div class="stat-number in-progress-color">0</div>
            <div class="stat-label">进行中</div>
        </div>
        <div class="stat-card">
            <div class="stat-number completed-color">0</div>
            <div class="stat-label">已完成</div>
        </div>
        <div class="stat-card">
            <div class="stat-number canceled-color">0</div>
            <div class="stat-label">已取消</div>
        </div>
    </div>
    
    <!-- 饼图容器 -->
    <div class="chart-container">
        <div class="chart-title">任务状态分布饼图</div>
        <div id="taskPieChart" style="width: 100%; height: 350px;"></div>
    </div>
    
    <!-- 柱状图容器 -->
    <div class="chart-container">
        <div class="chart-title">任务状态分布柱状图</div>
        <div id="taskBarChart" style="width: 100%; height: 350px;"></div>
    </div>
</div>

<script>
// 任务统计图表功能
function initTaskStatsCharts() {
    // 初始化统计卡片数据
    updateStatCards({
        total_tasks: 0,
        not_started_tasks: 0,
        in_progress_tasks: 0,
        completed_tasks: 0,
        canceled_tasks: 0
    });
    
    // 初始化饼图
    const pieChart = echarts.init(document.getElementById('taskPieChart'));
    // 初始化柱状图
    const barChart = echarts.init(document.getElementById('taskBarChart'));
    
    // 获取任务统计数据
    fetchTaskStatsData(pieChart, barChart);
    
    // 窗口大小改变时重新调整图表大小
    window.addEventListener('resize', function() {
        pieChart.resize();
        barChart.resize();
    });
}

// 获取任务统计数据
function fetchTaskStatsData(pieChart, barChart) {
    // 显示加载动画
    layer.load(2);
    
    // 调用API获取数据（无需额外携带uid参数，axios已全局配置）
    axios({
        url: '/api/task/task_stats/'
    })
        .then(function(response) {
            if (response.data.code === 0) {
                const taskStats = response.data.data;
                
                // 更新统计卡片
                updateStatCards(taskStats);
                
                // 更新饼图
                updatePieChart(pieChart, taskStats);
                
                // 更新柱状图
                updateBarChart(barChart, taskStats);
            } else {
                layer.msg(response.data.message || '获取任务统计数据失败', {icon: 5});
            }
        })
        .catch(function(error) {
            console.error('获取任务统计数据失败:', error);
            layer.msg('获取任务统计数据失败，请稍后重试', {icon: 5});
        })
        .finally(function() {
            // 关闭加载动画
            layer.closeAll('loading');
        });
}

// 更新统计卡片
function updateStatCards(taskStats) {
    const statCards = document.querySelectorAll('.stat-card .stat-number');
    statCards[0].textContent = taskStats.total_tasks || 0;
    statCards[1].textContent = taskStats.not_started_tasks || 0;
    statCards[2].textContent = taskStats.in_progress_tasks || 0;
    statCards[3].textContent = taskStats.completed_tasks || 0;
    statCards[4].textContent = taskStats.canceled_tasks || 0;
}

// 更新饼图
function updatePieChart(chart, taskStats) {
    const option = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
            orient: 'horizontal',
            bottom: 10,
            data: ['未开始', '进行中', '已完成', '已取消']
        },
        series: [
            {
                name: '任务状态',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 16,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    {
                        value: taskStats.not_started_tasks || 0,
                        name: '未开始',
                        itemStyle: { color: '#FFB800' }
                    },
                    {
                        value: taskStats.in_progress_tasks || 0,
                        name: '进行中',
                        itemStyle: { color: '#1E9FFF' }
                    },
                    {
                        value: taskStats.completed_tasks || 0,
                        name: '已完成',
                        itemStyle: { color: '#009688' }
                    },
                    {
                        value: taskStats.canceled_tasks || 0,
                        name: '已取消',
                        itemStyle: { color: '#999' }
                    }
                ].filter(item => item.value > 0) // 过滤掉值为0的数据
            }
        ]
    };
    
    chart.setOption(option);
}

// 更新柱状图
function updateBarChart(chart, taskStats) {
    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: ['未开始', '进行中', '已完成', '已取消'],
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '任务数量',
                minInterval: 1 // 确保y轴刻度为整数
            }
        ],
        series: [
            {
                name: '任务数量',
                type: 'bar',
                barWidth: '60%',
                data: [
                    {
                        value: taskStats.not_started_tasks || 0,
                        itemStyle: { color: '#FFB800' }
                    },
                    {
                        value: taskStats.in_progress_tasks || 0,
                        itemStyle: { color: '#1E9FFF' }
                    },
                    {
                        value: taskStats.completed_tasks || 0,
                        itemStyle: { color: '#009688' }
                    },
                    {
                        value: taskStats.canceled_tasks || 0,
                        itemStyle: { color: '#999' }
                    }
                ]
            }
        ]
    };
    
    chart.setOption(option);
}

// 页面加载完成后初始化图表
layui.use( function() {
    var $ = layui.$;
    // 确保DOM加载完成后初始化图表
    $(function() {
        initTaskStatsCharts();
    });
});
</script>